import React, { Component } from 'react'
import { View, Text, ScrollView } from 'react-native'
import commonStyle from '../../../../libs/commonStyle'
import Iconfont from '../../../../components/iconfont'
import TableHead from '../../../../components/tableHead/index'
import { shareTableHeadList } from '../data'
import API from '../../../../api/request'
import {deviceHeightDp} from '../../../../libs/pxToDp'

// const mock = [{
// 	title: 'shxhis维护和违法的 u 无房户违法或为 u 发货uwhdiqwd',
// 	readDate: '2019-04-02 11:11:11',
// 	income: '100.00'
// },{
// 	title: 'shxhis维护和违法的 u 无房户违法或为 u 发货uwhdiqwd',
// 	readDate: '2019-04-02 11:11:11',
// 	income: '100.00'
// }]
export default class TabShareIncome extends Component {
  constructor (props) {
    super(props)
    this.state = {
      oneReadIncome: '',
      list: [],
      statList: [
        {
          title: '总共转发收入',
          type: 'totalForwardIncome',
          amount: '0.00'
        },
        {
          title: '今日转发收入',
          type: 'todayForwardIncome',
          amount: '0.00'
        }
      ],

      tableHeadList: shareTableHeadList
    }
  }
	filterTime (str) {
		return str.substring(0, str.length - 3)
	}
  componentWillMount () {
    this.apiData()
  }
  async apiData () {
    let url = '/api/user/forward_income/'
    let res = await API.post(url)
    let data = res.data
    let { statList } = this.state
    if (res && res.code === '200') {
      statList.map((item, index) => {
        if (data[item.type]) {
          statList[index].amount = data[item.type]
        }
      })
      this.setState({
        oneReadIncome: data.oneReadIncome,
        statList,
        list: (data && data.forwardIncomeList) || []
				// list: mock
      })
    }
  }
  render () {
    const { statList, tableHeadList, list, oneReadIncome } = this.state
    return (
      <ScrollView style={{height: deviceHeightDp*0.56}}>
        <View style={[commonStyle.flexCenter, commonStyle.p20, commonStyle.pt30]}>
          <View style={[commonStyle.flexRow, commonStyle.border]}>
            {statList.map((item, index) => {
              return (
                <View
                  key={item.type}
                  style={[
                    commonStyle.p30,
                    commonStyle.flexItem,
                    commonStyle.flexCenter,
                    index === 0 ? commonStyle.borderRight : ''
                  ]}
                >
                  <Text style={[commonStyle.f26, { color: '#444' }]}>
                    {item.title}
                  </Text>
                  <View
                    style={[
                      commonStyle.flexRow,
                      commonStyle.mt20,
                      commonStyle.flexVerticalCenter
                    ]}
                  >
                    <Iconfont name='money4' size={10} color='#666' />
                    <Text
                      style={[
                        commonStyle.f36,
                        commonStyle.fontBold,
                        commonStyle.ml10
                      ]}
                    >
                      {item.amount}
                    </Text>
                  </View>
                </View>
              )
            })}
          </View>
        </View>
        <View style={[commonStyle.p20]}>
          <Text style={[commonStyle.mb20, commonStyle.f26]}>最近100条转发收入</Text>
          <TableHead list={tableHeadList} />
          {list.map((item, index) => {
            return (
              <View
                style={[
                  commonStyle.flexRow,
                  commonStyle.p20,
                  commonStyle.flexVerticalCenter,
                  commonStyle.borderBottom
                ]}
              >
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[0].flex }]}>
										<Text  style={[commonStyle.f22]}>
										  {this.filterTime(item.readDate)}
										</Text>
								</View>
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[1].flex }]}>
										<Text numberOfLines={2} style={[commonStyle.f22]}>
										  {item.title}
										</Text>
								</View>
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[2].flex }]}>
										<Text style={[commonStyle.f22]}>
										  {item.income}
										</Text>
								</View>
              </View>
            )
          })}
        </View>
      </ScrollView>
    )
  }
}
